<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>[[${tag.tagName}]]</title>
    <link rel="stylesheet" href="/static/css/bulma.min.css" th:href="@{/css/bulma.min.css}">
    <link rel="stylesheet" href="/static/css/community.css" th:href="@{/css/community.css}">
    <link rel="stylesheet" href="/static/css/notice.css" th:href="@{/css/notice.css}">
    <script type="text/javascript" src="/static/js/jquery-3.7.1.min.js" th:src="@{/js/jquery-3.7.1.min.js}"></script>
    <script type="text/javascript" src="/static/js/awesome.js" th:src="@{/js/awesome.js}"></script>
    <script type="text/javascript" src="/static/js/community.js" th:src="@{/js/community.js}"></script>
    <script type="text/javascript" src="/static/js/notice.js" th:src="@{/js/notice.js}"></script>
</head>
<body class="has-navbar-fixed-top">
<!-- 导航栏内容 -->
<div th:replace="~{common/nav::nav(current=1,size=10,keyword='')}"></div>
<!-- 中间部分内容 -->
<section class="section">
    <div class="container is-max-widescreen is-desktop">
        <div class="columns is-desktop index-top">
            <div class="column column-item">
                <div class="card index-card-border">
                    <header class="card-header-title article-card-header level">
                        <span class="level-left">
                            <span class="level-item ">
                                <a th:href="${'/question/tag/'+tag.tagId+'.html'}"
                                   th:text="${tag.tagName}"
                                   class="button is-rounded is-focused is-link is-focused">经济</a>
                            </span>
                        </span>
                        <!--<span class="level-right ">
                            <a href="#" th:href="@{/article/add-article}" class="button is-rounded is-outlined is-dark level-item">
                                <i class="fa-solid fa-newspaper"></i> &nbsp;
                                添加文章
                            </a>
                        </span>-->
                    </header>
                    <div class="divider"></div>
                    <div class="card-content">
                        <div th:each="article:${tag.pageArticleList.data}">
                            <div class="columns index-article-list index-column-item ">
                                <div class="column is-one-fifth"
                                     th:if="${article.firstPicture!=null&&article.firstPicture!=''}">
                                    <figure class="image tag-img is-3by2">
                                        <img th:src="${article.firstPicture}" src="/static/img/firstpic.jpg"
                                             alt="User Avatar">
                                    </figure>
                                </div>
                                <div th:class="'column'+${(article.firstPicture!=null&&article.firstPicture!='')?' is-four-fifths':''}"
                                     class="column is-four-fifths">
                                    <div>
                                        <strong>
                                            <a class="index-article-title"
                                               th:href="${'/question/'+article.username+'/'+article.articleId+'.html'}"
                                               th:utext="${article.title}"
                                               href="/question/sloan/1.html">中国未来经济怎么样</a>
                                        </strong>
                                    </div>
                                    <div>
                                    <span>
                                         <img class="rounded-avatar" th:src="${article.avatarUrl}"
                                              src="/static/img/000.jpg" alt="User Avatar">
                                         <i class="fa-solid fa-at"></i>
                                         <span th:text="${article.nickname}">Sloan</span>
                                    </span>
                                        <span class="ml-2">
                                        <i class="fa-duotone fa-solid fa-calendar-days"></i>
                                        <span th:text="${#temporals.format(article.createdTime,'yyyy/MM/dd')}">2024-11-18</span>
                                    </span>
                                        <span class="ml-2">
                                        <i class="fa-regular fa-message"></i>
                                        <span th:text="${article.commentCount}">100</span>
                                    </span>
                                        <span class="ml-2">
                                        <i class="fa-regular fa-eye"></i>
                                        <span th:text="${article.view}">100</span>
                                    </span>
                                        <span class="ml-2">
                                        <i class="fa-regular fa-thumbs-up"></i>
                                            <span th:text="${article.likeCount}">100</span>
                                    </span>
                                        <span class="ml-2">
                                         <i class="fa-solid fa-tag"></i>
                                         <a class="tag is-light is-link index-tag"
                                            th:each="aTag:${article.tags}"
                                            th:class="'tag is-light index-tag '+${aTag.id.equals(tag.tagId)?'is-link':''}"
                                            th:href="${'/question/tag/'+aTag.id+'.html'}"
                                            th:text="${aTag.name}">经济</a>
                                    </span>
                                    </div>
                                    <span class="index-article-content-size">
                                    <span th:utext="${article.content}">未来三年请务必谨慎中国将面临重大的变革，由于当前国内外局势的不确定性以及一些不宜公开的原因，未来三年需要特别注意。...</span>
                                    <a href="#"
                                       th:href="${'/question/'+article.username+'/'+article.articleId+'.html'}"
                                    > 阅读全文</a>
                                </span>
                                </div>
                            </div>
                            <div class="divider"></div>
                        </div>

                        <nav class="pagination is-centered" role="navigation" aria-label="pagination">
                            <a class="pagination-previous"
                               th:if="${tag.pageArticleList.getHasPrePage()}"
                               th:href="@{'/question/tag/'+${tag.tagId}+'.html?current='+${tag.pageArticleList.getPrePage()}+'&size='+${tag.pageArticleList.getSize()}}">上一页</a>
                            <a class="pagination-next"
                               th:if="${tag.pageArticleList.getHasNextPage()}"
                               th:href="@{'/question/tag/'+${tag.tagId}+'.html?current='+${tag.pageArticleList.getNextPage()}+'&size='+${tag.pageArticleList.getSize()}}">下一页</a>
                            <ul class="pagination-list">
                                <li th:each="num:${tag.pageArticleList.nums}">
                                    <a class="pagination-link is-current"
                                       th:class="${tag.pageArticleList.current.equals(num)?'pagination-link is-current':'pagination-link'}"
                                       th:href="@{'/question/tag/'+${tag.tagId}+'.html?current='+${num}+'&size='+${tag.pageArticleList.getSize()}}"
                                       aria-label="Goto page 1" th:text="${num}">1</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 底部部分内容 -->
<div th:replace="~{common/footer::footer}"></div>

</body>

</html>